<template>
  <div style="position: relative;">
    <!-- <el-select
      v-model="value"
      placeholder="仓库筛选"
      class="select"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select> -->

    <div
      :id="echarsData.id"
      :style="{width:echarsData.width+'px',height:echarsData.height+'px',
      background:'#f4f5f7',padding:10+'px',borderRadius:8+'px'}"
    ></div>

  </div>
</template>

<script>
export default {
  name: "basicEchars",
  props: {
    echarsData: {
      type: Object,
    },
  },
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "A仓库",
        },
        {
          value: "选项2",
          label: "B仓库",
        },
        {
          value: "选项3",
          label: "C仓库",
        },
      ],
      value: "",
    };
  },
  methods: {
    drawLine() {
      console.log("id", this.echarsData.id);
      let echarts = this.$echarts.init(
        document.getElementById(this.echarsData.id)
      );
      echarts.setOption({
        title: {
          text: this.echarsData.text,
          textStyle: {
            height: 24,
            color: "#000000",
            fontSize: 18,
            fontFamily: "MicrosoftYaHei, MicrosoftYaHei-Bold",
            fontWeight: 700,
            lineHeight: 24,
          },
         
        },

        legend: this.echarsData.legend,
        color: this.echarsData.color,
        grid: {
          left: "2%",
          right: "4%",
          bottom: "6%",
          height: "70%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          formatter: this.echarsData.formatter,
        },
        toolbox: {
          show: true,
          feature: {
            magicType: {
              type: ["line", "bar"],
            },
            onclick: function () {
              console.log("hhhhhhhhhhhhhhhh");
            },
          },
          right: 20,
          top: 35,
        },
        xAxis: {
          data: this.echarsData.xData,
        },
        yAxis: {
          name: this.echarsData.yName,
          nameTextStyle: {
            fontSize: 14,
            color: "#939699",
            fontFamily: "MicrosoftYaHei, MicrosoftYaHei-MicrosoftYaHei",
            fontWeight: "normal",
            lineHeight: 14,
          },
        },
        // 立体柱状图的数据
        series: this.echarsData.series,
      });
    },
  },
  mounted() {
    this.drawLine();
  },
};
</script>

<style>
.el-input--suffix .el-input__inner {
  padding-right: 30px;
  width: 112px;
  height: 24px;
}
.el-input__icon {
  line-height: 24px;
}
.select {
  position: absolute;
  top: 15px;
  left: 698px;
  z-index: 1;
}
</style>